<script setup lang="ts">
import { ref, computed } from 'vue'
import { Search, Edit, Setting, Delete, Plus } from '@element-plus/icons-vue'
import { getUserVO,delCinemaManager } from '../../../../api/user'
import { isNull } from '../../../../utils/filter'
import Dialog from './components/UserDialog.vue'
import { ElMessage } from 'element-plus';
interface IUser {
    userId: number
    nick: string
    phone: string
    role: number
    unitId: number
    unitName: string
    unitAddress: string
}
const userList = ref<IUser[]>([])
let dialogTableValue = ref({})
const search = ref('')

const filterTableData = computed(() =>
    userList.value.filter(
        (data: IUser) =>
            !search.value ||
            data.nick.toLowerCase().includes(search.value.toLowerCase())
    )
)

const handleDialogValue = (row: IUser | object) => {
    if (isNull(row)) {
        dialogTitle.value = '新增用户'
        dialogTableValue.value = {}
    } else {
        dialogTitle.value = '编辑用户'
        dialogTableValue.value = JSON.parse(JSON.stringify(row))
    }
    dialogVisible.value = true
}

const getUserVOApi = () => {
    getUserVO().then((res: any) => {
        debugger
        if (res.code == 200) {
            userList.value = res.data
        } else {
            ElMessage.error("获得用户列表失败")
        }
    })
}

getUserVOApi()

const delUser = (row: IUser) => {
    delCinemaManager({userId:row.userId}).then((res:any) => {
     if(res.code == 200) {
        ElMessage.success("删除成功")
        getUserVOApi()
     }else{
        ElMessage.error("删除失败")
     }
   })
}

let dialogVisible = ref(false)
let dialogTitle = ref('新增用户')

</script>

<template>
    <div class="account-manage">
        <div class="top">
            <el-button type="primary" :icon="Plus" @click="handleDialogValue({})">新增用户</el-button>
        </div>
        <el-table :data="filterTableData" style="width: 100%">
            <el-table-column label="用户名" prop="nick" />
            <el-table-column label="手机号" prop="phone" />
            <el-table-column label="所属影院" prop="unitName" />
            <el-table-column label="详细地址" prop="unitAddress" />
            <el-table-column align="right">
                <template #header>
                    <el-input v-model="search" size="small" placeholder="Type to search" />
                </template>
                <template #default="{ row }">
                    <el-button size="small" :icon="Edit" type="primary" @click="handleDialogValue(row)"></el-button>
                    <el-button size="small" :icon="Delete" type="danger" @click="delUser(row)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <Dialog v-model="dialogVisible" :dialogTableValue="dialogTableValue" :dialogTitle="dialogTitle"
            v-if="dialogVisible" @initUserList="getUserVOApi"></Dialog>
    </div>
</template>

<style scoped lang="scss">
.top {
    flex-shrink: 0;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
}
</style>
